<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="Hexo Theme Keep">
    <meta name="description" content="Hexo Theme Keep">
    <meta name="author" content="aaton">
    
    <title>
        
            Vue之v-if与v-show |
        
        aaton&#39;s study notes
    </title>
    
<link rel="stylesheet" href="/css/style.css">

    <link rel="shortcut icon" href="/images/logo.svg">
    
<link rel="stylesheet" href="/font/css/fontawesome.min.css">

    
<link rel="stylesheet" href="/font/css/regular.min.css">

    
<link rel="stylesheet" href="/font/css/solid.min.css">

    
<link rel="stylesheet" href="/font/css/brands.min.css">

    <script id="hexo-configurations">
    let KEEP = window.KEEP || {}
    KEEP.hexo_config = {"hostname":"example.com","root":"/","language":"en"}
    KEEP.theme_config = {"toc":{"enable":false,"number":false,"expand_all":false,"init_open":false},"style":{"primary_color":"#0066cc","logo":"/images/logo.svg","favicon":"/images/logo.svg","avatar":"/images/avatar.svg","font_size":null,"font_family":null,"hover":{"shadow":false,"scale":false},"first_screen":{"enable":true,"header_transparent":true,"background_img":"/images/bg.svg","description":"Keep writing and Keep loving.","font_color":null,"hitokoto":true},"scroll":{"progress_bar":false,"percent":false}},"local_search":{"enable":false,"preload":false},"code_copy":{},"code_block":{"tools":{"enable":true,"style":"default"},"highlight_theme":"default"},"side_tools":{},"pjax":{"enable":false},"lazyload":{"enable":false},"comment":{"enable":false,"use":"valine","valine":{"appid":null,"appkey":null,"server_urls":null,"placeholder":null},"gitalk":{"github_id":null,"github_admins":null,"repository":null,"client_id":null,"client_secret":null,"proxy":null},"twikoo":{"env_id":null,"region":null,"version":"1.6.8"},"waline":{"server_url":null,"reaction":false,"version":2}},"post":{"author_label":{"enable":true,"auto":true,"custom_label_list":["Trainee","Engineer","Architect"]},"word_count":{"enable":true,"wordcount":true,"min2read":true},"img_align":"left","copyright_info":false},"version":"3.6.1"}
    KEEP.language_ago = {"second":"%s seconds ago","minute":"%s minutes ago","hour":"%s hours ago","day":"%s days ago","week":"%s weeks ago","month":"%s months ago","year":"%s years ago"}
    KEEP.language_code_block = {"copy":"Copy code","copied":"Copied","fold":"Fold code block","folded":"Folded"}
    KEEP.language_copy_copyright = {"copy":"Copy copyright info","copied":"Copied","title":"Original article title","author":"Original article author","link":"Original article link"}
  </script>
<meta name="generator" content="Hexo 6.3.0"></head>


<body>
<div class="progress-bar-container">
    

    
</div>


<main class="page-container">

    

    <div class="page-main-content">

        <div class="page-main-content-top">
            
<header class="header-wrapper">

    <div class="header-content">
        <div class="left">
            
                <a class="logo-image" href="/">
                    <img src="/images/logo.svg">
                </a>
            
            <a class="logo-title" href="/">
               aaton&#39;s study notes
            </a>
        </div>

        <div class="right">
            <div class="pc">
                <ul class="menu-list">
                    
                        <li class="menu-item">
                            <a class=""
                               href="/"
                            >
                                HOME
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/archives"
                            >
                                ARCHIVES
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/tags"
                            >
                                TAGS
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/categories"
                            >
                                CATEGORIES
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/about"
                            >
                                ABOUT
                            </a>
                        </li>
                    
                    
                </ul>
            </div>
            <div class="mobile">
                
                <div class="icon-item menu-bar">
                    <div class="menu-bar-middle"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="header-drawer">
        <ul class="drawer-menu-list">
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/">HOME</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/archives">ARCHIVES</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/tags">TAGS</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/categories">CATEGORIES</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/about">ABOUT</a>
                </li>
            
        </ul>
    </div>

    <div class="window-mask"></div>

</header>


        </div>

        <div class="page-main-content-middle">

            <div class="main-content">

                
                    <div class="fade-in-down-animation">
    <div class="post-page-container">
        <div class="article-content-container">

            <div class="article-title">
                <span class="title-hover-animation">Vue之v-if与v-show</span>
            </div>

            
                <div class="article-header">
                    <div class="avatar">
                        <img src="/images/avatar.svg">
                    </div>
                    <div class="info">
                        <div class="author">
                            <span class="name">aaton</span>
                            
                                <span class="author-label">Lv3</span>
                            
                        </div>
                        <div class="meta-info">
                            
<div class="article-meta-info">
    <span class="article-date article-meta-item">
        
            <i class="fa-regular fa-calendar-plus"></i>&nbsp;
        
        <span class="pc">2023-06-05 11:00:11</span>
        <span class="mobile">2023-06-05 11:00</span>
    </span>
    
        <span class="article-update-date article-meta-item">
        <i class="fas fa-file-pen"></i>&nbsp;
        <span class="pc">2023-05-11 19:15:27</span>
    </span>
    
    
        <span class="article-categories article-meta-item">
            <i class="fas fa-folder"></i>&nbsp;
            <ul>
                
                    <li>
                        <a href="/categories/Vue3/">Vue3</a>&nbsp;
                    </li>
                
                    <li>
                        &gt; <a href="/categories/Vue/">Vue</a>&nbsp;
                    </li>
                
                    <li>
                        &gt; <a href="/categories/Vue2/">Vue2</a>&nbsp;
                    </li>
                
            </ul>
        </span>
    
    
        <span class="article-tags article-meta-item">
            <i class="fas fa-tags"></i>&nbsp;
            <ul>
                
                    <li>
                        <a href="/tags/v-if/">v-if</a>&nbsp;
                    </li>
                
                    <li>
                        | <a href="/tags/v-show/">v-show</a>&nbsp;
                    </li>
                
            </ul>
        </span>
    

    
    
        <span class="article-wordcount article-meta-item">
            <i class="fas fa-file-word"></i>&nbsp;<span>1.4k Words</span>
        </span>
    
    
        <span class="article-min2read article-meta-item">
            <i class="fas fa-clock"></i>&nbsp;<span>6 Mins</span>
        </span>
    
    
        <span class="article-pv article-meta-item">
            <i class="fas fa-eye"></i>&nbsp;<span id="busuanzi_value_page_pv"></span>
        </span>
    
</div>

                        </div>
                    </div>
                </div>
            

            <div class="article-content keep-markdown-body">
                

                <p><img src="https://cn.bing.com/th?id=OHR.Popocatepetl_ZH-CN5483138337_1920x1080.webp&qlt=50" alt="bing.com-普埃布拉天主堂和波波卡特佩特火山，普埃布拉，墨西哥" title="bing.com-普埃布拉天主堂和波波卡特佩特火山，普埃布拉，墨西哥"></p>
<p>Vue中v-if与v-show的各自定义、原理，以及之间的相同点与区别。</p>
<span id="more"></span>

<h1 id="1-v-if"><a href="#1-v-if" class="headerlink" title="1.v-if"></a>1.v-if</h1><h3 id="1-v-if-指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染"><a href="#1-v-if-指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染" class="headerlink" title="(1). v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染"></a>(1). <code>v-if</code> 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;h1 v-if=&quot;isShow&quot;&gt;This is a demo!&lt;/h1&gt;</span><br></pre></td></tr></table></figure>

<ul>
<li><code>v-if</code>是一个<strong>指令</strong>,它必须依附于某个元素。但如果我们想要切换不止一个元素的话，可以在一个 <code>&lt;template&gt;</code> 元素上使用<code>v-if</code>。<code>&lt;template&gt;</code>是一个不可见的包装元素，最后渲染的结果并不会显示。</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;template v-if=&quot;isShow&quot;&gt;</span><br><span class="line">  &lt;h1&gt;Title&lt;/h1&gt;</span><br><span class="line">  &lt;p&gt;Paragraph 1&lt;/p&gt;</span><br><span class="line">  &lt;p&gt;Paragraph 2&lt;/p&gt;</span><br><span class="line">&lt;/template&gt;</span><br></pre></td></tr></table></figure>

<h3 id="2-v-else可以配合v-if使用，用于不符合if条件时所渲染的块内容"><a href="#2-v-else可以配合v-if使用，用于不符合if条件时所渲染的块内容" class="headerlink" title="(2). v-else可以配合v-if使用，用于不符合if条件时所渲染的块内容"></a>(2). <code>v-else</code>可以配合<code>v-if</code>使用，用于不符合if条件时所渲染的块内容</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&lt;button @click=&quot;isShow = !isShow&quot;&gt;Toggle&lt;/button&gt;</span><br><span class="line"></span><br><span class="line">&lt;h1 v-if=&quot;isShow&quot;&gt;when isShow is true&lt;/h1&gt;</span><br><span class="line">&lt;h1 v-else&gt;when isShow is false&lt;/h1&gt;</span><br></pre></td></tr></table></figure>

<ul>
<li>一个<code>v-else</code>元素必须跟在一个<code>v-if</code>或<code>v-else-if</code>元素后面，否则它将<strong>不会被识别</strong>。</li>
</ul>
<h3 id="3-v-else-if提供的是相应于v-if的else-if区块，它可以连续多次重复使用"><a href="#3-v-else-if提供的是相应于v-if的else-if区块，它可以连续多次重复使用" class="headerlink" title="(3). v-else-if提供的是相应于v-if的else if区块，它可以连续多次重复使用"></a>(3). <code>v-else-if</code>提供的是相应于<code>v-if</code>的<strong>else if</strong>区块，它可以<strong>连续多次重复使用</strong></h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&lt;div v-if=&quot;string === &#x27;A&#x27;&quot;&gt;</span><br><span class="line">  A</span><br><span class="line">&lt;/div&gt;</span><br><span class="line">&lt;div v-else-if=&quot;string === &#x27;B&#x27;&quot;&gt;</span><br><span class="line">  B</span><br><span class="line">&lt;/div&gt;</span><br><span class="line">&lt;div v-else-if=&quot;string === &#x27;C&#x27;&quot;&gt;</span><br><span class="line">  C</span><br><span class="line">&lt;/div&gt;</span><br><span class="line">&lt;div v-else&gt;</span><br><span class="line">  Not A/B/C</span><br><span class="line">&lt;/div&gt;</span><br></pre></td></tr></table></figure>

<ul>
<li>一个<code>v-else-if</code>元素必须跟在一个<code>v-if</code>或<code>v-else-if</code>元素后面，否则它将<strong>不会被识别</strong>。</li>
</ul>
<hr>
<h1 id="2-v-show"><a href="#2-v-show" class="headerlink" title="2.v-show"></a>2.v-show</h1><h3 id="v-show指令用于按条件显示元素"><a href="#v-show指令用于按条件显示元素" class="headerlink" title="v-show指令用于按条件显示元素"></a><code>v-show</code>指令用于按条件显示元素</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;h1 v-show=&quot;ok&quot;&gt;Hello!&lt;/h1&gt;</span><br></pre></td></tr></table></figure>

<ul>
<li><p><code>v-show</code>会在DOM渲染中<strong>保留该元素</strong>，显示&#x2F;隐藏时只是切换了该元素上名为<code>display</code>的CSS属性。</p>
</li>
<li><p><strong><code>v-show</code>不支持在<code>&lt;template&gt;</code>元素上使用，也不能和<code>v-else</code>搭配使用。</strong></p>
</li>
</ul>
<hr>
<h1 id="3-v-if和v-show的共同点"><a href="#3-v-if和v-show的共同点" class="headerlink" title="3.v-if和v-show的共同点"></a>3.v-if和v-show的共同点</h1><ul>
<li><p>用法相同，且都能控制元素在页面是否显示。</p>
<ul>
<li><p>当表达式为true时，都会占据页面位置。</p>
</li>
<li><p>当表达式为false时，都不会占据页面位置。</p>
</li>
</ul>
</li>
</ul>
<hr>
<h1 id="4-v-if和v-show的区别"><a href="#4-v-if和v-show的区别" class="headerlink" title="4.v-if和v-show的区别"></a>4.v-if和v-show的区别</h1><ul>
<li>控制手段不同</li>
</ul>
<p><code>v-show</code>隐藏是<strong>为元素添加<code>css--display:none</code><strong>，DOM元素还在,只是被隐藏了；<code>v-if</code>显示隐藏是</strong>将DOM元素整个添加或删除</strong>。</p>
<ul>
<li>编译过程不同</li>
</ul>
<p><code>v-if</code>切换有一个局部编译&#x2F;卸载的过程，切换过程中合适地<strong>销毁和重建内部的事件监听和子组件</strong>；<code>v-show</code>只是简单的基于css切换。</p>
<ul>
<li><p>编译条件不同</p>
<ul>
<li><p><code>v-show</code>由false变为true的时候<strong>不会触发组件的生命周期</strong></p>
</li>
<li><p><code>v-if</code>由false变为true的时候，<strong>触发组件的<code>beforeCreate</code>、<code>create</code>、<code>beforeMount</code>、<code>mounted</code>钩子</strong>，由true变为false的时候<strong>触发组件的<code>beforeDestory</code>、<code>destoryed</code>方法</strong>。</p>
</li>
</ul>
</li>
</ul>
<blockquote>
<p><code>v-if</code>是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。渲染条件为假时，并不做操作，<strong>直到为真才渲染</strong>。<br><code>v-if</code>是“真实的”按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建。<br><code>v-if</code>也是惰性的：如果在初次渲染时条件值为 false，则不会做任何事。条件区块只有当条件首次变为true时才被渲染。<br>相比之下，<code>v-show</code>简单许多，<strong>元素无论初始条件如何，始终会被渲染</strong>，只有CSS display属性会被切换。<br>总的来说，<code>v-if</code>有更高的<mark>切换开销</mark>，而<code>v-show</code>有更高的初始<mark>渲染开销</mark>。因此，如果需要频繁切换，则使用<code>v-show</code>较好；如果在运行时绑定条件很少改变，则<code>v-if</code>会更合适。</p>
</blockquote>
<hr>
<h1 id="5-v-show与v-if原理分析"><a href="#5-v-show与v-if原理分析" class="headerlink" title="5.v-show与v-if原理分析"></a>5.v-show与v-if原理分析</h1><ul>
<li>v-show原理</li>
</ul>
<p>不管初始条件是什么，元素总是会被渲染。有transition就执行，没有就直接设置display属性。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">// https://github.com/vuejs/vue-next/blob/3cd30c5245da0733f9eb6f29d220f39c46518162/packages/runtime-dom/src/directives/vShow.ts</span><br><span class="line">export const vShow: ObjectDirective&lt;VShowElement&gt; = &#123;</span><br><span class="line">  beforeMount(el, &#123; value &#125;, &#123; transition &#125;) &#123;</span><br><span class="line">    el._vod = el.style.display === &#x27;none&#x27; ? &#x27;&#x27; : el.style.display</span><br><span class="line">    if (transition &amp;&amp; value) &#123;</span><br><span class="line">      transition.beforeEnter(el)</span><br><span class="line">    &#125; else &#123;</span><br><span class="line">      setDisplay(el, value)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  mounted(el, &#123; value &#125;, &#123; transition &#125;) &#123;</span><br><span class="line">    if (transition &amp;&amp; value) &#123;</span><br><span class="line">      transition.enter(el)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  updated(el, &#123; value, oldValue &#125;, &#123; transition &#125;) &#123;</span><br><span class="line">    // ...</span><br><span class="line">  &#125;,</span><br><span class="line">  beforeUnmount(el, &#123; value &#125;) &#123;</span><br><span class="line">    setDisplay(el, value)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>v-if原理</li>
</ul>
<p>返回一个node节点，<code>render</code>函数通过表达式的值来决定是否生成DOM。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line">// https://github.com/vuejs/vue-next/blob/cdc9f336fd/packages/compiler-core/src/transforms/vIf.ts</span><br><span class="line">export const transformIf = createStructuralDirectiveTransform(</span><br><span class="line">  /^(if|else|else-if)$/,</span><br><span class="line">  (node, dir, context) =&gt; &#123;</span><br><span class="line">    return processIf(node, dir, context, (ifNode, branch, isRoot) =&gt; &#123;</span><br><span class="line">      // ...</span><br><span class="line">      return () =&gt; &#123;</span><br><span class="line">        if (isRoot) &#123;</span><br><span class="line">          ifNode.codegenNode = createCodegenNodeForBranch(</span><br><span class="line">            branch,</span><br><span class="line">            key,</span><br><span class="line">            context</span><br><span class="line">          ) as IfConditionalExpression</span><br><span class="line">        &#125; else &#123;</span><br><span class="line">          // attach this branch&#x27;s codegen node to the v-if root.</span><br><span class="line">          const parentCondition = getParentCondition(ifNode.codegenNode!)</span><br><span class="line">          parentCondition.alternate = createCodegenNodeForBranch(</span><br><span class="line">            branch,</span><br><span class="line">            key + ifNode.branches.length - 1,</span><br><span class="line">            context</span><br><span class="line">          )</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;</span><br><span class="line">)</span><br></pre></td></tr></table></figure>

<hr>
<h1 id="6-v-show与v-if的使用场景"><a href="#6-v-show与v-if的使用场景" class="headerlink" title="6.v-show与v-if的使用场景"></a>6.v-show与v-if的使用场景</h1><p><code>v-if</code>与<code>v-show</code>都能控制DOM元素在页面的显示。</p>
<p><code>v-if</code>相比<code>v-show</code>开销更大（直接操作DOM节点增加与删除）。</p>
<p><mark>如果需要非常频繁地切换，则使用<code>v-show</code>较好。</mark></p>
<p><mark>如果在运行时条件很少改变，则使用<code>v-if</code>较好。</mark></p>
<hr>
<h1 id="7-v-if和v-for"><a href="#7-v-if和v-for" class="headerlink" title="7.v-if和v-for"></a>7.v-if和v-for</h1><p><strong>同时使用 v-if 和 v-for 是不推荐的，因为这样二者的优先级不明显。</strong></p>
<p>当<code>v-if</code>和<code>v-for</code>同时存在于一个元素上的时候，<code>v-if</code>会首先被执行。</p>
<p>详见 <em><strong><a class="link"   target="_blank" rel="noopener" href="https://clowner.gitee.io/2023/05/07/v-for%E5%88%97%E8%A1%A8%E6%B8%B2%E6%9F%93/" >v-for列表渲染<i class="fas fa-external-link-alt"></i></a></strong></em></p>
<hr>
<p><em><strong>本文参考文献：</strong></em></p>
<p><em><strong><a class="link"   target="_blank" rel="noopener" href="https://cn.vuejs.org/guide/essentials/conditional.html" >Vue.js官方文档 ： 条件渲染<i class="fas fa-external-link-alt"></i></a></strong></em></p>
<p><em><strong><a class="link"   target="_blank" rel="noopener" href="https://vue3js.cn/interview/vue/show_if.html#%E4%B8%89%E3%80%81v-show%E4%B8%8Ev-if%E5%8E%9F%E7%90%86%E5%88%86%E6%9E%90" >web前端 - 面试官系列 ： Vue中的v-show和v-if怎么理解？<i class="fas fa-external-link-alt"></i></a></strong></em></p>

            </div>

            

            
                <ul class="post-tags-box">
                    
                        <li class="tag-item">
                            <a href="/tags/v-if/">#v-if</a>&nbsp;
                        </li>
                    
                        <li class="tag-item">
                            <a href="/tags/v-show/">#v-show</a>&nbsp;
                        </li>
                    
                </ul>
            

            
                <div class="article-nav">
                    
                        <div class="article-prev">
                            <a class="prev"
                               rel="prev"
                               href="/2023/06/05/ES6%20%E4%B9%8B%E8%A7%A3%E6%9E%84/"
                            >
                            <span class="left arrow-icon flex-center">
                              <i class="fas fa-chevron-left"></i>
                            </span>
                                <span class="title flex-center">
                                <span class="post-nav-title-item">ES6之解构</span>
                                <span class="post-nav-item">Prev posts</span>
                            </span>
                            </a>
                        </div>
                    
                    
                        <div class="article-next">
                            <a class="next"
                               rel="next"
                               href="/2023/06/05/Vue%E4%B9%8Bv-for%E5%88%97%E8%A1%A8%E6%B8%B2%E6%9F%93/"
                            >
                            <span class="title flex-center">
                                <span class="post-nav-title-item">Vue之v-for列表渲染</span>
                                <span class="post-nav-item">Next posts</span>
                            </span>
                                <span class="right arrow-icon flex-center">
                              <i class="fas fa-chevron-right"></i>
                            </span>
                            </a>
                        </div>
                    
                </div>
            

            
        </div>

        
    </div>
</div>


                
            </div>

        </div>

        <div class="page-main-content-bottom">
            
<footer class="footer">
    <div class="info-container">
        <div class="copyright-info info-item">
            &copy;
            
                <span>2020</span> -
            
            2024
            
                &nbsp;<i class="fas fa-heart icon-animate"></i>
                &nbsp;<a href="/">aaton</a>
            
        </div>
        
            <script async 
                    src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
            <div class="website-count info-item">
                
                    Visitor Count&nbsp;<span id="busuanzi_value_site_uv"></span>&ensp;
                
                
                    Totalview&nbsp;<span id="busuanzi_value_site_pv"></span>
                
            </div>
        
        <div class="theme-info info-item">
            Powered by <a target="_blank" href="https://hexo.io">Hexo</a>&nbsp;|&nbsp;Theme&nbsp;<a class="theme-version" target="_blank" href="https://github.com/XPoet/hexo-theme-keep">Keep v3.6.1</a>
        </div>
        
        
    </div>
</footer>

        </div>
    </div>

    
        <div class="post-tools">
            <div class="post-tools-container">
    <ul class="tools-list">
        <!-- TOC aside toggle -->
        

        <!-- go comment -->
        
    </ul>
</div>

        </div>
    

    <div class="right-bottom-side-tools">
        <div class="side-tools-container">
    <ul class="side-tools-list">
        <li class="tools-item tool-font-adjust-plus flex-center">
            <i class="fas fa-search-plus"></i>
        </li>

        <li class="tools-item tool-font-adjust-minus flex-center">
            <i class="fas fa-search-minus"></i>
        </li>

        <li class="tools-item tool-dark-light-toggle flex-center">
            <i class="fas fa-moon"></i>
        </li>

        <!-- rss -->
        

        
            <li class="tools-item tool-scroll-to-top flex-center">
                <i class="fas fa-arrow-up"></i>
            </li>
        

        <li class="tools-item tool-scroll-to-bottom flex-center">
            <i class="fas fa-arrow-down"></i>
        </li>
    </ul>

    <ul class="exposed-tools-list">
        <li class="tools-item tool-toggle-show flex-center">
            <i class="fas fa-cog fa-spin"></i>
        </li>
        
    </ul>
</div>

    </div>

    <div class="zoom-in-image-mask">
    <img class="zoom-in-image">
</div>


    

</main>




<script src="/js/utils.js"></script>

<script src="/js/main.js"></script>

<script src="/js/header-shrink.js"></script>

<script src="/js/back2top.js"></script>

<script src="/js/dark-light-toggle.js"></script>







    
<script src="/js/code-block.js"></script>





<div class="post-scripts">
    
        
<script src="/js/post-helper.js"></script>

        
        
    
</div>



</body>
</html>
